<template class="main">
    <div class="pages">
        <div class="introduction">
            <div class="part">
                <span class="item-title">标题</span>
                <span class="item-divider">：</span>
                <div class="item-text" v-text="state.info.title"></div>
            </div>
            <div class="part">
                <span class="item-title">发布部门</span>
                <span class="item-divider">：</span>
                <div class="item-text" v-text="state.info.createOrgName"></div>
            </div>
            <div class="part">
                <span class="item-title">发布人</span>
                <span class="item-divider">：</span>
                <div class="item-text" v-text="state.info.createUserName"></div>
            </div>
            <div class="part">
                <span class="item-title">发布时间</span>
                <span class="item-divider">：</span>
                <div class="item-text" v-text="state.info.createTime"></div>
            </div>

        </div>
        <div class="content" v-html="state.info.content">
        </div>
    </div>
    <div class="tab-bottom" @click="toggle">
        <div class="confirm">章节选择</div>
    </div>
    <van-action-sheet v-model:show="state.dialogShow" :round="false">
        <div class="container">
            <div class="nav">
                <p class="cancel" @click="toggle">取消</p>
                <p class="confirm" @click="confirm">确认</p>
            </div>
            <div class="divider"></div>
            <div class="lists">
                <van-pull-refresh class="pull-refresh" v-model="lists.refresh.loading" @refresh="onRefresh">
                    <van-list v-model:loading="lists.more.loading" :finished="lists.more.finished" finished-text="没有更多了"
                        @load="onLoad">
                        <div class="normal" @click="selectList(item)" v-for="(item) in lists.lists"
                            :class="{ selected: lists.selectItem.id == item.id }">

                            <p class="title" v-text="item.title"
                                :class="{ title_selected: lists.selectItem.id == item.id }">
                            </p>
                        </div>
                    </van-list>
                </van-pull-refresh>
            </div>
        </div>

    </van-action-sheet>
</template>
<script lang="ts" setup>
import { onMounted, reactive } from 'vue';
import { useRoute } from 'vue-router';
const route = useRoute();

const state = reactive({
    info: {} as any,
    dialogShow: false
})

const lists = reactive({
    refresh: {
        loading: false
    },
    more: {
        loading: false,
        finished: false
    },
    selectItem: {
        id: '',
        title: '',
        content: ''
    },
    lists: [] as any
})

const selectItem = reactive({
    id: '',
    title: '',
    content: ''
})


const toggle = () => {
    state.dialogShow = !state.dialogShow
}

// 下拉刷新回调
const onRefresh = () => {
    // 清空列表数据
    lists.more.finished = false;

    // 重新加载数据
    // 将 loading 设置为 true，表示处于加载状态
    lists.more.loading = true;
    onLoad();
}


// 加载更多回调
const onLoad = () => {
    setTimeout(() => {
        if (lists.refresh.loading) {
            lists.lists = [];
            lists.refresh.loading = false;
        }

        let temp = [{
            id: '1',
            title: '第一章 · 落实新修订的行政处罚法，修改6部规章',
            content: '近日，市场监管总局公布《国家市场监督管理总局关于修改和废止有关规章的决定》（以下简称《决定》），对6部规章的部分条款予以修改，对4部规章予以废止，自2022年5月1日起施行。 一、落实新修订的行政处罚法，修改6部规章 　　2021年1月22日，第十三届全国人大常委会第二十五次会议审议通过新修订的《中华人民共和国行政处罚法》，于2021年7月15日起正式施行。为了贯彻落实新修订的《中华人民共和国行政处罚法》，在前期清理基础上，本次《决定》对《国家市场监督管理总局规章制定程序规定》《市场监督管理投诉举报处理暂行办法》2部规章的部分条款内容进行修改。同时，依据新修改的《市场监督管理行政处罚程序规定》《市场监督管理行政处罚听证办法》，对《市场监督管理行政许可程序暂行规定》《禁止垄断协议暂行规定》《禁止滥用市场支配地位行为暂行规定》《经营者集中审查暂行规定》4部规章中涉及的相关规章名称进行修改，保持规章名称一致，维护法制统一。 二、推进“放管服”改革，废止4部规章 （一）废止《广告发布登记管理规定》 2021年4月29日，《全国人民代表大会常务委员会关于修改<中华人民共和国道路交通安全法>等八部法律的决定》对《中华人民共和国广告法》作出修改，删去了“广播电台、'
        }, {
            id: '2',
            title: '第二章 · 推进“放管服”改革，废止4部规章',
            content: 'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa'
        }, {
            id: '3',
            title: '第三章 · 落实新修订的行政处罚法，修改6部规章',
            content: 'bbbb'
        }, {
            id: '4',
            title: '第四章 · 推进“放管服”改革，废止4部规章',
            content: 'cccc'
        }, {
            id: '5',
            title: '第五章 · 落实新修订的行政处罚法，修改6部规章',
            content: 'dddd'
        }, {
            id: '6',
            title: '第六章 · 推进“放管服”改革，废止4部规章',
            content: 'eeee'
        }, {
            id: '7',
            title: '第七章 · 落实新修订的行政处罚法，修改6部规章',
            content: 'rrrrr'
        }, {
            id: '8',
            title: '第八章 · 推进“放管服”改革，废止4部规章',
            content: 'fffff'
        }];
        lists.lists.push(...temp);
        lists.more.loading = false;

        if (lists.lists.length >= 40) {
            lists.more.finished = true;
        } else {
            lists.more.finished = false;
        }
    }, 1000);
}

// 跳转详情页
const selectList = (item: any) => {
    lists.selectItem.id = item.id
    lists.selectItem.title = item.title
    lists.selectItem.content = item.content
    console.log(item)
}

const confirm = () => {
    selectItem.id = lists.selectItem.id
    selectItem.title = lists.selectItem.title
    selectItem.content = lists.selectItem.content
    toggle()
}

onMounted(() => {
	state.info = route.query;
	console.log('--', state.info);
})

</script>
<style lang="scss" scoped>
.main {
    position: relative;
    min-height: 100%;
}

.tab-bottom {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 50px;
    background: #ffffff;
    box-shadow: 0px -1px 2.5px 1px rgba(0, 0, 0, 0.03), -0.5px 0px 0px 0.5px #ebebeb inset;
    line-height: 100px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 10px 12px;
    box-sizing: border-box;

    .confirm {
        width: 100%;
        height: 30px;
        background: #f1f4ff;
        border-radius: 5px;
        flex: 1;
        text-align: center;
        margin: 0 6px;
        line-height: 30px;
        font-size: 14px;
        font-family: PingFang SC, PingFang SC-Medium;
        font-weight: bold;
        color: #4c69dc;
    }
}

.pages {
    padding: 12px 12px 62px 12px;
    display: flex;
    flex-direction: column;

    .introduction {
        width: 100%;
        background: #ffffff;
        border-radius: 5px;
        box-shadow: 0.5px 0.87px 4.5px 1px rgba(0, 0, 0, 0.05);
        display: flex;
        flex-direction: column;
        padding: 16px 12px;
        box-sizing: border-box;

        .part {

            display: flex;
            flex-direction: row;
            align-items: flex-start;

            .item-title {
                width: 60px;
                font-size: 14px;
                font-weight: bold;
                text-align: left;
                color: #181818;
                text-align: justify;
                text-align-last: justify;
                display: inline-block;
                line-height: 29px;
            }

            .item-divider {
                font-size: 14px;
                font-weight: bold;
                text-align: left;
                color: #181818;
                text-align: justify;
                text-align-last: justify;
                display: inline-block;
                line-height: 29px;
            }

            .item-text {
                width: 0;
                font-size: 14px;
                font-weight: bold;
                text-align: justify;
                color: #646464;
                line-height: 29px;
                overflow: hidden;
                flex: 1;
            }

        }




    }

    .content {
        width: 100%;
        height: auto;
        background: #ffffff;
        border-radius: 5px;
        box-shadow: 0.5px 0.87px 4.5px 1px rgba(0, 0, 0, 0.05);
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        margin: 16px 0;
        padding: 16px 12px;
        box-sizing: border-box;
        font-size: 10px;
        font-weight: bold;
        text-align: left;
        color: #646464;
        line-height: 20px;
    }
}

.container {
    display: flex;
    flex-direction: column;
    height: 370px;

    .nav {
        display: flex;
        height: 32px;
        flex-direction: row;
        align-items: center;

        .cancel {
            font-size: 14px;
            font-weight: bold;
            text-align: left;
            color: #646464;
            line-height: 16px;
            margin-left: 12px;
        }

        .confirm {
            font-size: 14px;
            font-weight: bold;
            text-align: left;
            color: #4c69dc;
            line-height: 16px;
            margin-right: 12px;
            margin-left: auto;
        }
    }

    .divider {
        width: 100%;
        height: 0.5px;
        background: #ececec;
    }

    .lists {
        flex: 1;
        height: 0;
        overflow-y: scroll;
        margin-top: 1px;

        .pull-refresh {
            .van-list {
                box-sizing: border-box;
                padding: 11px;

                .item::selection {
                    height: 33px;
                    background: #f8f8f8;
                    border-radius: 2.5px;
                }

                .normal {
                    height: 33px;
                    display: flex;
                    align-items: center;
                    padding: 0 12px;
                }

                .selected {
                    height: 33px;
                    display: flex;
                    align-items: center;
                    background: #f8f8f8;
                    border-radius: 2.5px;
                }

                .title {
                    font-size: 14px;
                    font-weight: bold;
                    text-align: left;
                    color: #BBBBBB;
                }

                .title_selected {
                    font-size: 14px;
                    font-weight: bold;
                    text-align: left;
                    color: #646464;
                }

                .container {
                    width: 50px;
                }
            }
        }
    }
}
</style>